<!--
import { basename } from 'path';
  搜索面板
-->
<template>
  <!--整个是河道表格-->
  <div>
    <!--这里是搜索框-->
    <div class="panel-search">
      <el-input placeholder="请输入内容" v-model="searchInput" class="input-with-select" style="width:236px;">
        <!-- <el-select v-model="select" slot="prepend" placeholder="全部">
          <el-option
            label="全部"
            value="all"
            />
          <el-option v-for="cal in tableFormat"
            :key="cal['prop']+'search'"
            :label="cal['label']/*显示值*/"
            :value="cal['prop']/*实际值*/"
            v-if="cal['isSearch']==true/*需要搜索的才输出*/"
            />
        </el-select> -->
        <el-button @click="gatData" slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <div class="table-div" style="padding: 0 10px;">
      <!--这里是表格-调整样式使表格透明化-->
      <el-table v-loading="loading" :stripe='this.stripe' @row-dblclick="localDblClikeRow" :height="460" :data="tableData" :border="true" style="width: 100%; background-color:rgba(255,255,255,0);" :row-style="{color: '#fff'}" :header-row-style="{'background-color':'rgba(255,255,255,0)'}" :header-cell-style="{'background-color':'rgba(255,255,255,0)' ,'border-bottom': '0px','font-size':'12px','color':'#fff'}" :cell-style="{'background-color':'rgba(255,255,255,0)','border-bottom': '0px' }" size="medium" row-key="properties">
        <el-table-column v-for="col in tableFormat" :key="col['prop']" :width="col['width']" :prop="col['prop']" :label="col['label']" :show-overflow-tooltip="true">
          <!-- 内容显示使用自定义组件 -->
          <template slot-scope="scope">
            <!-- 动态组件 -->
            <component :is="formatter(scope.row,scope.column,scope.row[col['prop']],scope.$index,col['formatter'])" :row="scope.row" :column="scope.column" :cellValue="scope.row[col['prop']]" :index="scope.$index" />
          </template>
        </el-table-column>
      </el-table>
      <!--这里是分页-->
      <div class="block">
        <el-pagination :background="true" :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, next, jumper, slot" :total="total">
          <el-button type="button" @click="gatData()" :loading="loading" icon="el-icon-refresh"></el-button>
        </el-pagination>
      </div>
    </div>
  </div>

</template>

<style scoped>
@import "./css/Panel.css";
.el-input-group__prepend {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background-color: rgba(15, 34, 75, 0.88);
  border: 1px solid #38aae0;
  border-right: none;
}

.el-pagination .btn-prev {
  color: #000;
}
.el-pagination .btn-next {
  color: #000;
}
.el-pagination span:not([class*="suffix"]),
.el-pagination button {
  color: #000;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
::-webkit-scrollbar-corner {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}
.block{
  color: #000;
}
/*新增样式，主要用穿透来写*/
.block>>>.el-pagination__total{
  color: #000;
}
.block>>>.el-icon{
  color: #000;
}
.block>>>.el-pagination__jump{
  color: #000;
}
.block >>> .el-input__inner{
  background: transparent;
  color: #000;
  border-color: #000;
}
.panel-search>>>.el-input{
  /* border:1px solid #000; */
  background: #000;
}
.panel-search>>>.el-input__inner{
  border: 1px solid #000;
  border-right: none;
  color: #000;
  height: 35px;
}
.panel-search>>>input::-webkit-input-placeholder{
  color: #000;
  /* background: #fff; */
}
.panel-search>>>.el-input{
  background: #fff;
}
.panel-search>>>.el-input-group__append{
  background: #fff;
  border: 1px solid #000;
  border-left: none;
}
.table-div>>>.el-table__row{
  background: #fff;
}
.table-div>>>.el-table__row:hover{
  background: #fdf5e6;
  cursor:pointer;
}
.table-div>>>.el-table__row--striped{
  background: #f3f9ff;
}
/*右侧tabs样式*/
.el-tabs__item:hover{
  color: #000;
  font-weight: bold;
}
</style>

<script>
export default {
  data () {
    return {
      loading: true,
      stripe: true,
      total: 0,
      pageSize: 8,
      currentPage: 1,
      // 搜索框数据
      searchInput: '',
      select: 'all',
      // 表格中假数据
      tableData: [],
      BASIN: '1'
    }
  },
  mounted: function () {
    // 初始化数据
    this.gatData()
  },
  watch: {
    currentPage: function () {
      this.gatData()
    },
    // 标题
    'tableFormat': function () {
      this.gatData()
    }
  },
  methods: {
    getQueryParam () {
      // let querySrc = 'page=' + this.currentPage + '&pageSize=' + this.pageSize
      // if (this.searchInput !== '') {
      //   this.tableFormat.forEach(e => {
      //     if (e.isSearch) {
      //       querySrc += '&' + e['prop'] + '=' + this.searchInput
      //     }
      //   })
      // }
      // return querySrc
            return {
        page: this.currentPage,
        pageSize: this.pageSize,
        BASIN: 1,
        STNM:this.searchInput
      }
    },
    gatData: function () {
      let _this = this
      this.loading = true
      let { url, param } = this.$handleSrc(this.src, { row: this.row })
      url = this.searchInput === '' ? this.src : this.querySrc + '?BASIN=' + this.BASIN
      if(typeof url === 'object'){
        url = url['url']
      }
      this.$postJSON(url, {...param, ...this.getQueryParam()})
        .then(data => {
          this.$set(_this, 'tableData', data['data']['result'])
          _this.total = data['data']['total'] | data.length
          _this.loading = false
        })
        .catch(function (e) {
          _this.loading = false
        })
    },
    // 用户自定义格式化函数检查
    formatter (row, column, cellValue, index, colformatter) {
      // 存在的场合执行用户定义的函数
      if (colformatter) {
        let result = colformatter(row, column, cellValue, index)
        // 是对象（组件）
        if (typeof result === 'object') {
          // 直接返回组件
          return result
        }
        // 组装渲染
        return {
          // 模版
          template: `<span>${result}</span>`
        }
      } else {
        // 返回默认组件构造器
        return {
          // 模版
          template: '<span>{{cellValue}}</span>',
          // 参数
          props: ['cellValue']
        }
      }
    },
    localDblClikeRow (row, e) {
      if (this.dblClikeRow) {
        this.dblClikeRow(row, e)
      }
    }
  },
  // 组建接受的传入参数
  props: [
    // 标题
    'tableFormat',
    // 来源地址
    'src',
    // 查询来源
    'querySrc',
    // 双击
    'dblClikeRow'
  ]
}
</script>
